<!--
 * @Author: zjj zhangjj@newgrand.cn
 * @Date: 2025-03-02 22:21:13
 * @LastEditors: zjj zhangjj@newgrand.cn
 * @LastEditTime: 2025-03-02 22:24:48
 * @FilePath: \vue3-ts-backend-management-system\src\components\recursive-menu-item.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 递归菜单的实现 -->
<template>
  <el-sub-menu v-if="item.children && item.children.length" :index="item.id">
    <template #title>
      <el-icon><location /></el-icon>
      <span>{{ item.name }}</span>
    </template>
    <recursive-menu-item v-for="child in item.children" :key="child.id" :item="child" />
  </el-sub-menu>
  <el-menu-item v-else :index="item.id">
    <el-icon><location /></el-icon>
    <span>{{ item.name }}</span>
  </el-menu-item>
</template>

<script setup lang="ts">
import { ElIcon, ElMenuItem, ElSubMenu } from 'element-plus';
import { defineComponent } from 'vue';

defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const RecursiveMenuItem = defineComponent({
  name: 'RecursiveMenuItem',
  props: ['item'],
  components: {
    ElSubMenu,
    ElMenuItem,
    ElIcon,
    Location,
    RecursiveMenuItem: () => import('./RecursiveMenuItem.vue'), // 递归导入自身
  },
});
</script>